<template>
  <div class="finance_box" ref="myElementRef">
    <div ref="searchBox">
      <hc-search :data="serchData" @serch="getSarch($event)" @getadd="getadd($event)" />
    </div>
    <!-- 表格 -->
    <div class="table_box">
      <hc-table :tableData="tableData" :column="state.tableHeader" :offsetHeight="state.offsetHeight" :maxPage="maxPage"
        @pageChange="pageChange" @limitChange="limitChange">
        <template #login_status="{ row }">
          {{ row.login_status == 1 ? '成功' : '失败' }}
        </template>
       
      </hc-table>
    </div>
   
  </div>
</template>

<script setup>
import hcSearch from "@/components/hc-search/index.vue";
import hcTable from "@/components/hc-table/index.vue";
import { onMounted, reactive, ref, nextTick, onUnmounted, onActivated } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { LoginLogs} from '@/api/user.js';
const myElementRef = ref();
const searchBox = ref();

let page = ref(1);
let limit = ref(20);
let maxPage = ref(0);

const tableData = ref([]);

const serchData = reactive([
  {
    label: "姓名关键字",
    type: "input",
    value: "",
  },

]);

const state = reactive({
  column: [
    {
      type: "index",
      show: true,
      label: "序号",
      width: 80,
    },
    {
      prop: "username",
      show: true,
      label: "账号",
    },
    {
      prop: "name",
      show: true,
      label: "姓名",
    },
    {
      prop: "login_ip",
      show: true,
      label: "登录IP",
    },
    
    {
      prop: "login_time",
      show: true,
      label: "登录时间",
    },
    {
      prop: "login_status",
      show: true,
      label: "状态",
    },
    {
      prop: "failure_reason",
      show: true,
      label: "失败原因",
    },
  ],
  flng: true,
  offsetHeight: 0,
  tableHeader: [],
});

onMounted(() => {
  try {
    nextTick(() => {
      offHeighths();
    });
    window.onresize = () => {
      nextTick(() => {
        offHeighths();
      });
    };
    tableHeaderFn();
  } catch { }

  getList();
});
// 动态改变表头
const change = (item) => {
  tableHeaderFn();
};


const offHeighths = () => {
  if (myElementRef.value) {
    state.offsetHeight =
      myElementRef.value?.offsetHeight - 130 - searchBox.value?.offsetHeight;
  }
};

onUnmounted(() => {
  window.onresize = null;
});

// 查询过来的数据
const getSarch = (data) => {
  // console.log("查询", data);
  page.value = 1
  getList()
};


// 表头筛选
const tableHeaderFn = () => {
  state.tableHeader = state.column.filter((v) => {
    if (v.show) {
      return v.show == true;
    } else {
      v.show = false;
    }
  });
};


const pageChange = (currentPage) => {
  // console.log(currentPage, "0002")
  page.value = currentPage;
  // getSearch(searchData)
  getList();
}

const limitChange = (currentLimit) => {
  // console.log(currentLimit, "0001")
  page.value = 0;
  limit.value = currentLimit;
  getList();
}

const getList = async () => {
  // console.log(serchData[0].value)
  const res = await LoginLogs({
    page: page.value,
    limit: limit.value,
    name: serchData[0].value
  });
  tableData.value = res.data || [];
  maxPage.value = res?.maxPage || 0;
};


</script>

<style lang="less" scoped>
.finance_box {
  flex: 1;
  overflow: auto;
  background-color: #fff;
  border-radius: 6px;
  padding: 10px;
  margin-right: 10px;
}

.btn_box {
  height: 40px;
  display: flex;
}

.table_box {
  width: 100%;
}

/deep/.el-button-group .el-button--primary:first-child {
  background-color: #1e6aed;
  border: none;
}

.serBtn {
  margin-left: 10px;
  background-color: #f0f0f0;
  color: #000;
  border: none;
}

.serBtn:hover {
  background-color: #f0f0f0;
  color: #000;
}

.from_add {
  display: flex;
  width: 100%;
  justify-content: center;
}

.tree_itme {
  min-height: 400px;
}
</style>
